<!DOCTYPE HTML>
<html><head>
<title>Date Series Picker Test</title>
<script src="date-util.js"></script>
<script src="date-series.js"></script>
<script src="date-series-inference.js"></script>
<script src="date-series-picker.js"></script>
<style>
.date-series-picker table { border-collapse: collape }
.date-series-picker .cal td {
  text-align: center; background: #eef;
  border-width: 1px;
  border-style: solid;
  border-color: transparent
}
.date-series-picker .cal td,
.date-series-picker .cal th { width: 1.5em }
.date-series-picker .cal td.sel {
  text-align: center; background: yellow;
  border-style: dotted; border-color: black
}
.date-series-picker .cal td.not-in-month { background: #ddd }
.date-series-picker .cal td.not-in-month.sel { background: #ded }
.date-series-picker .cal td.anchor {
  font-weight: bold; border-style: solid; border-color: black
}
.date-series-picker .cal tr.not-in-month { display: none }
.date-series-picker .year-disp,
.date-series-picker .month-disp { text-align:center }
.date-series-picker { width: 12em }
.date-series-picker .ctrls button {
  width: 6em; margin-left: 1.5em
}
</style>
</head>
<body>
<h1>Date Series Picker Test</h1>

<div id="container"></div>

<script>
attachDateSeriesPicker(
  document.getElementById('container'),
  new Date(Date.UTC(2012, 7, 4)),
  {
    onConfirm: function (x) { alert(JSON.stringify(x)); },
    onCancel: function (x) { alert("Cancel"); },
    onSelect: function (all, changed) {
      console.log('all=' + all.map(fmtDate) + ', changed=' + fmtDate(changed));
    },
    wkst: 0
  });
</script>
</body></html>
